<template>
<div>
	<div class="box1">
	    <span class="f1" @click="goback" > < </span>
		<span class="f2" >苹果APPLE数码电子专场</span>
	<router-link to="/index"><span class="f3" ><img src="../assets/iPhone/home.png" alt="" height="35" width="35" ></span></router-link>
	</div>
	<div class="box2">
		<div>
			<div class="b1"><img src="../assets/apple.webp" width="42" height="21" alt=""></div>
			<div class="font">
				<span style="font-size: 14px;">苹果</span>
				<br>
				<span style="font-size: 12px;">苹果APPLE数码电子专场</span>
			</div>
			<div class="img4">
				<img  class="img2" src="../assets/yellow.webp" width="16" height="16" style="vertical-align: -3px;">
				<span class="f4">  全场6.1折起</span>
			</div>
		</div>
		<div></div>
	</div>
	<div class="radio">
	</div>
	<div class="nav">
		<span>价格</span>
		<span>折扣</span>
		<span>销量</span>
		<span>筛选</span>
	</div>
	<div class="showgod">
		
			<div class="gooder" v-for="(item,index)  in apple">
				<img :src="item.img" width="178" height="178" @click="goinfo(item)">
				<span class="sp1">特卖价</span>
				<span class="sp2">￥{{item.pirce}}</span><span style="font-size: 12px; font-weight: 700;">起</span>
				<span class="sp3">￥{{item.count}}</span>
				<p>{{item.product}}}</p>
			</div>
	</div>
</div>

</template>

<script>
export default {
	props:[''],
	data(){
		return{
			apple:[
				{img:"../assets/iPhone/1.jpg",pirce:"123", count:"1234",product:"iPhone 13 Pro 双卡双待 全网通 5G手机"},
				{img:"../assets/iPhone/2.jpg",pirce:"234",count:"3432",product:"2021款第9代ipad 10.2【内胆包套餐】WLAN版"},
				{img:"../assets/iPhone/3.jpg",pirce:"6654", count:"6899",product:"iPhone 13 Pro Max 双卡双待全网通 5G手机"},
				{img:"../assets/iPhone/4.jpg",pirce:"3342",count:"7699",product:"iPhone11 128G双卡双待（无充电器耳机）全网通手机"},
				{img:"../assets/iPhone/5.jpg",pirce:"8875",count:"5433",product:"iPhone 12【壳膜+快充电源套餐】全网通 5G手机"},
				{img:"../assets/iPhone/6.jpg",pirce:"8832",count:"8848",product:"iPhone 13 Pro Max【壳膜+快充电源套餐】全网通 5G手机"},
				
			]
		}
	},
	methods:{
		goback(){
			this.$router.back();//回退上一级
		},
		goinfo(row){
		    let objData = JSON.stringify(row)
		    this.$router.push({
		        path: '/goodinformation',
		        query:{allData: encodeURIComponent(objData)}
		    })
		}
	
	}
}
</script>

<style scoped="scoped">
	.sp1{
		display: inline-block;
		width: 50px;
		height: 15px;
		font-size: 10px;
		background-color:#f74b8a ;
		color: white;
		margin-left: 10px;
		text-align: center;
		line-height: 15px;
		border-radius: 4px;
	}
	.sp2{
		font-size: 16px;
		font-weight: 700;
	}
	.sp3{
		font-size: 12px;
		text-decoration: line-through;
		color: #98989F;
	}
	p{
		font-size: 14px;
		font-family: "arial, helvetica, sans-serif";
		color: #585C64;
	}
	.img4{
		position: relative;
		left: 33px;
		top: 24px;
		color: white;
		font-size: 14px;
	}
	.showgod{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.showgod div {
		width: 170px;
		height: 300px;
	/* 	border: 1px solid black; */
		margin-left: 5px;
		margin-top: 5px;
	}
	.box1{
		width: 100%;
		height: 44px;
	/* 	border: 1px solid black; */
		display: flex;
		justify-content: space-between;
		line-height: 44px;
		/* padding-left:15px ;
		padding-right:15px; */
	}
	.box1 img {
		vertical-align: -5px;
	}
	.b1 img{
		margin-left: 4px;
	}
	.f1{
		font-size: 30px;
	}
	.f2{
		font-size: 18px;
		color: #222222;
		font-family: "arial, helvetica, sans-serif";
	}
	.box2{
		width: 100%;
		height: 132px;
		background: url(../assets/iphone.jpg) no-repeat center center;
		background-size: 100%;
	}
	.radio{
		width: 100%;
		height: 20px;
		border-radius: 10px;
		border-top-left-radius:25px;
		border-top-right-radius:25px;
		background-color: white;
		position: relative;
		top: -9px;
	}
.nav{
	width: 100%;
	height: 30px;
	color: #585C64;
	font-size: 14px;
	/* border-top: 1px solid #98989F; */
	position: relative;
	top: -17px;
	display: flex;
	justify-content: space-evenly;
	line-height: 59px;
	
}
.b1{
	border-radius: 5px;
	width: 50px;
	height: 50px;
	background-color: white;
	position: relative;
	left: 35px;
	top: 30px;
	line-height: 60px;
}
.font{
	margin-left: 100px;
	margin-top: -25px;
	color: white;
	
}

</style>
